<template>
  <div class="main-left">
    <!-- 产业园情况 -->
    <div class="products">
      <div class="echartTitles echartTitles-none">
        <div class="title-name">空气质量指数评价</div>
      </div>
      <div class="products-list">
        <div class="title">空气质量优良天数</div>
        <div class="devCharts">
          <!-- <div class="devleft" ref="devleft"></div> -->
          <div class="devright" ref="devright"></div>
        </div>
      </div>
    </div>
    <!-- 基础建设 -->
    <div class="devs">
      <div class="echartTitles" @click="titleClick('devType')">
        <div class="title-name">空气主要污染物占比</div>
      </div>
      <div class="devs-list">
        <div class="dev-rank">
          <div class="rank-box">
            <div class="select-box">
              <select v-model="selectedYear">
                <option value="1">高安县</option>
                <option value="2">上安县</option>
                <option value="3">铜鼓县</option>
                <option value="4">安远县</option>

              </select>
            </div>

            <div style="display: flex">
              <div
                style="
                  width: 100%;
                  height: 320px;
                  display: flex;

                  gap: 10px;
                  border: red solid 1px;
                "
              >
                <div
                  id="chart_box_1"
                  style="
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                    border: 1px solid #ccc;
                  "
                ></div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 320px;
                  display: flex;

                  gap: 10px;
                  border: red solid 1px;
                "
              >
                >
                <div
                  id="chart_box_2"
                  style="
                    width: 100%;
                    height: 100%;
                    margin: 0 auto;
                    border: 1px solid #ccc;
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
  props: ["leftData"],
  data() {
    return {
      selectedYear: "1",
      myChart1: null,
      myChart: {},
    
    
      xValue: [10, 19, 24, 26, 11, 9, 20, 28, 10, 19, 24, 26, 11, 9, 20, 28],
      yValue: [
        "a縣",
        "b縣",
        "c縣",
        "d縣",
        "e縣",
        "f縣",
        "g縣",
        "h縣",
        "a縣",
        "b縣",
        "c縣",
        "d縣",
        "e縣",
        "f縣",
        "g縣",
        "h縣",
      ],

   
      configs: {},
      devType: {
        title: "空气污染物",
        times: false,
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      //组件加载后调用空气质量优良天数方法
      this.secondEchart();
      // 调用污染物占比方法
      this.updateChart();
    });
    this.myChart1 = echarts.init(document.getElementById("chart_box"));
  },
  watch: {
    leftData: {
      handler(newValue) {
        this.configs = {
          data: datas,
          index: false,
          columnWidth: [55, 480],
          hoverPause: true,
          align: ["center"],
          oddRowBGC: "rgba(255, 255, 255, 0)",
          evenRowBGC: "rgba(255, 255, 255, 0)",
          headerBGC: "rgba(6, 75, 115, 0.25)",
        };
      },
      deep: true, // 深度监听
    },



     //切换不同县的污染物占比
    selectedYear: {
      handler(newVal) {
       
        this.updateChart(newVal);
      },
    },
  },
  methods: {
    //污染物占比方法
    updateChart(year = this.selectedYear) {
      let renShu1, renShu2;
      switch (year) {
        case "1":
          renShu1 = [68.3, 75.3, 55.65, 91.2];
          renShu2 = [67.3, 89.2];
          break;
        case "2":
          renShu1 = [81.45, 61.3, 51.2, 43.0];
          renShu2 = [92.0, 69.2];
          break;
        case "3":
          renShu1 = [58.3, 91.3, 63.0, 71.2];
          renShu2 = [72.87, 55.65];
          break;
          case "4":
            renShu1 = [58.3, 91.3, 63.0, 71.2];
            renShu2 = [0, 55.65];
            break;
        default:
          renShu1 = [];
          renShu2 = [];
      }

      // 确保 renShu 数组的长度与 xAxis 数据数组的长度相同
      if (renShu1.length !== 4 || renShu2.length !== 2) {
        console.error("renShu 数组长度不正确");
        return;
      }

      const xAxisData1 = ["SO2", "N02", "PM10", "PM25"];
      const xAxisData2 = ["CO", "O3"];

      // 第一个柱状图配置
      const optionyear1 = {
        title: {
          text: "主要污染物占比",
          padding: [10, 100, 10, 500], // 标题位置
          subtext: "",
          textStyle: {
            color: "white", // 设置标题字体颜色为白色
          },
        },
        tooltip: {
          formatter: "{c}%",
          trigger: "axis",
          show: true, // 是否显示提示框组件 默认为true
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "black",
            },
          },
        },
        legend: {
          data: ["主要污染物占比"],
          textStyle: {
            color: "white", // 设置标题字体颜色为白色
          },
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData1,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: Math.max(...renShu1), // 动态设置 max 值
            splitNumber: 10,
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "主要污染物占比",
            type: "bar", // bar表示柱状图
            barWidth: 13,
            data: renShu1, // 数据
            itemStyle: {
              // 更多柱状图样式搜索API：series-bar.itemStyle
              normal: {
                color: "#1E90FF", // 改变柱状的颜色
                label: {
                  show: true, // 开启显示
                  position: "top", // 在上方显示
                  formatter: "{c}%", // 百分比显示
                  textStyle: {
                    // 数值样式
                    color: "white", // 柱上数据颜色
                    fontSize: 16,
                  },
                },
              },
            },
          },
        ],
      };

      // 第二个柱状图配置
      const optionyear2 = {
        title: {
          text: "CO 03超标率",
          padding: [10, 100, 10, 500], // 标题位置
          subtext: "",
          textStyle: {
            color: "white", // 设置标题字体颜色为白色
          },
        },
        tooltip: {
          formatter: "{c}%",
          trigger: "axis",
          show: true, // 是否显示提示框组件 默认为true
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "white",
            },
          },
        },
        legend: {
          data: ["CO 03超标率"],
          textStyle: {
            color: "white", // 设置标题字体颜色为白色
          },
        },
        xAxis: [
          {
            type: "category",
            data: xAxisData2,
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "",
            min: 0,
            max: Math.max(...renShu2), // 动态设置 max 值
            splitNumber: 10,
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "CO 03超标率",
            type: "bar", // bar表示柱状图
            barWidth: 15,
            data: renShu2, // 数据
            itemStyle: {
              // 更多柱状图样式搜索API：series-bar.itemStyle
              normal: {
                color: "#FF4500", // 改变柱状的颜色
                label: {
                  show: true, // 开启显示
                  position: "top", // 在上方显示
                  formatter: "{c}%", // 百分比显示
                  textStyle: {
                    // 数值样式
                    color: "white", // 柱上数据颜色
                    fontSize: 16,
                  },
                },
              },
            },
          },
        ],
      };

      // 初始化或获取第一个柱状图实例
      let myChart1 = echarts.getInstanceByDom(
        document.getElementById("chart_box_1")
      );
      if (myChart1 == undefined) {
        myChart1 = echarts.init(document.getElementById("chart_box_1"));
      }
      myChart1.clear();
      myChart1.setOption(optionyear1);

      // 初始化或获取第二个柱状图实例
      let myChart2 = echarts.getInstanceByDom(
        document.getElementById("chart_box_2")
      );
      if (myChart2 == undefined) {
        myChart2 = echarts.init(document.getElementById("chart_box_2"));
      }
      myChart2.clear();
      myChart2.setOption(optionyear2);
    },


    //空气质量优良天数方法
    secondEchart() {
      let myChart = echarts.getInstanceByDom(this.$refs.devright);
      if (myChart == undefined) {
        myChart = echarts.init(this.$refs.devright);
      }
      myChart.clear();

      let option = {
        color: ["#d84430"],
        tooltip: {
          show: true,
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            inside: false,
            verticalAlign: "bottom",
            lineHeight: 1,
            color: "#DDDFEB",
            formatter: function (value, index) {
              // 设置y轴文字的颜色
              if (index > 2) {
                return "{first|" + value + "}";
              } else {
                return "{other|" + value + "}";
              }
            },
            rich: {
              other: {
                color: "#DDDFEB",
                opacity: 0.57,
              },
              first: {
                color: "#DDDFEB",
              },
            },
          },
          data: this.yValue,
        },
        xAxis: {
          nameTextStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            align: "right",
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "rgba(255, 255, 255, 0.8)",
          },
        },
        grid: {
          top: "10%", // 增加顶部边距以适应滑动条
          bottom: "12.5%", // 增加底部边距以适应滑动条
          left: "10%",
          right: "10%", // 增加右侧边距以适应滑动条
        },
        series: [
          {
            name: "上月空气质量优良天数",
            barWidth: 13,
            type: "bar",
            data: this.xValue,
            itemStyle: {
              normal: {
                borderRadius: [3, 20, 20, 3],
                color: function (params) {
                  // 设置柱形图的颜色
                  if (params.dataIndex === 5) {
                    return "#d84430";
                  } else if (params.dataIndex === 4) {
                    return "#f38237";
                  } else if (params.dataIndex === 3) {
                    return "#e2aa20";
                  } else {
                    return "#608289";
                  }
                },
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "slider", // 滑动条类型
            show: true,
            yAxisIndex: 0, // 控制Y轴
            start: 70, // 初始显示的起始百分比
            end: 100, // 初始显示的结束百分比
            orient: "vertical", // 设置为垂直滑动条
            width: 16, // 滑动条宽度
            height: "80%", // 滑动条高度
            right: 0, // 滑动条距离右侧的距离
            bottom: "10%", // 滑动条距离底部的距离
            top: "10%", // 滑动条距离顶部的距离
            borderColor: " rgb(7, 46, 79)",
            backgroundColor: " rgb(7, 46, 79)",
            fillerColor: " rgb(7, 46, 79)",
            handleIcon:
              "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z",
            handleSize: "80%",
            handleStyle: {
              color: "#fff",
              shadowBlur: 3,
              shadowColor: "rgb(7, 46, 79)",
              shadowOffsetX: 2,
              shadowOffsetY: 2,
            },
            showDetail: false,
          },
          {
            type: "inside", // 内置缩放类型
            yAxisIndex: 0, // 控制Y轴
            start: 0, // 初始显示的起始百分比
            end: 100, // 初始显示的结束百分比
          },
        ],
      };

      myChart.setOption(option);
    },

    //title点击
    titleClick(e) {
      this.$emit("titleHandler", this[e]);
    },
  },
};
</script>
<style lang="less" scoped>
.echartTitles-none {
  background-image: url("../assets/title-none.png");
  cursor: auto;
}
.bar-chart {
  width: 60%;
  height: 60px;

  padding: 10px;
}
.main-left {
  width: 25%;
  height: 90%;
  display: flex;
  flex-direction: column;
  .products {
    width: 100%;

    flex: 1;
    display: flex;
    flex-direction: column;

    .products-list {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;

      .title {
        font-size: 14px;
        font-weight: 500;
        color: #71f286;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center; /* 修改这里 */
        padding-left: 0; /* 如果需要取消左边的内边距 */
      }

      .nums {
        font-size: 24px;
        font-weight: bold;
        color: #74ffea;
        margin-left: 20px; /* 如果需要保持间距，可以保留 */
      }
      .devCharts {
        flex: 1;
        width: 100%;
        display: flex;
        height: 50vh; /* 使用视口高度的50% */
        border: 1px red solid;

        .devright {
          width: 90%;
          height: 90%;
        }
      }
    }
  }

  .devs {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px snow solid;

    .devs-list {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;

      .dev-top {
        border: #51fff9 solid 1px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 10px;
        .top-item {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .item-name {
            font-size: 14px;
            font-weight: bold;
            color: #57f071;
            text-align: center;
          }

          .item-num {
            font-size: 18px;
            font-weight: bold;
            color: #d2ff00;
            text-align: center;
          }

          .item-nums {
            color: #51fff9;
          }
        }
      }

      .dev-rank {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: flex-start;
        .rank-box {
          width: 100%;
          height: 320px;

          gap: 10px;
          border: red solid 1px;

          .rank-title {
            width: 60px;
            height: 30px;
            position: relative;

            img {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
            }

            .rank-s {
              width: 100%;
              height: 100%;
              z-index: 99999;
              position: absolute;
              text-align: center;
              line-height: 30px;
              font-size: 12px;
              font-weight: 500;
              left: 0;
              top: 0;
            }
          }

          .input-range {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-bottom: 5px;
            .input-top {
              border: #51fff9 solid 1px;
              width: 98%;
              display: flex;
              justify-content: space-between;

              .range-name {
                display: block;
                font-size: 12px;
                font-family: Source Han Sans CN;
                font-weight: 400;
              }
            }

            .ranges {
              display: block;
              width: 98%;
              height: 12px;

              .range-value {
                display: block;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }

  .news {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .news-list {
      width: 100%;
      flex: 1;
    }
  }
}
</style>
<style>
.dv-scroll-board {
  .rows {
    .row-item {
      border-bottom: 1px dotted #153f1c !important;
    }
  }
}
</style>